import React, { useEffect, useState } from 'react'
import { Card, Space, Button, Table,Select,Input } from "antd"
import { findAllProductApi, findProductByTypeApi } from "../../../apis/productApi"
import {useNavigate} from "react-router-dom"

export default function List() {
  const [dataSource, setDataSource] = useState([])
  const [searchType,setSearchType] = useState("")
  const [searchData,setSearchData] = useState("")
  const navigate = useNavigate()
  useEffect(() => {
    fetchData()
  }, [])
  const addProduct = () => {
    navigate("/home/addlist")
  }
  const fetchData = async () => {
    const res = await findAllProductApi()
    console.log(res);
    setDataSource(res.data.data)
  }

  const typeChangeEvent = (value)=>{
    setSearchType(value)
  } 
  const valueDataEvent = (event)=>{
    const value = event.target.value
    setSearchData(value)
  }
  const searchEvent =async ()=>{
    let obj = {
      searchType,
      searchData
    }
    const res = await findProductByTypeApi(obj)
    setDataSource(res.data.data)
  }

  const updateProduct = (id)=>{
    //路由跳转和参数的传递
    navigate(`/home/updatelist`,{
      state:{id}
    })
  }

  const columns = [
    {
      title: '商品名字',
      dataIndex: 'name',
      align: "center"
    },
    {
      title: '商品描述',
      dataIndex: 'title',
      align: "center"
    },
    {
      title: '商品价格',
      dataIndex: 'price',
      align: "center"
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      align: "center",
      render: (p1) => {
        if (p1) {
          return p1.name
        } else {
          return "数据不详"
        }
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      align: "center",
      render: (p1, p2) => {
        if (p1 == 1) {
          return <Button>下架</Button>
        } else {
          return <Button type="primary">上架</Button>
        }
      }
    },
    {
      title: "操作",
      render: (p1, p2) => {
        return (
          <Space>
            <Button onClick={()=>updateProduct(p1._id)}>修改</Button>
            <Button>删除</Button>
          </Space>
        )
      }
    }
  ]
  return (
    <>
      {/* 搜素功能 */}
      <div style={{paddingRight:"20px",marginBottom:"30px"}}>
        <Select
          defaultValue="请选中搜索类型"
          style={{
            width: 180,
          }}
          onChange={typeChangeEvent}
          allowClear
          options={[
            {
              value: 'name',
              label: '按照名字搜素',
            },
            {
              value: 'title',
              label: '按照描述搜素',
            },
          ]}
        />
        <Input onChange={valueDataEvent} style={{width:"180px"}} placeholder="请输入搜素内容"></Input>
        <Button onClick={searchEvent}>搜素</Button>
          
      </div>
      {/* 表格功能 */}
      <Card
        size="default"
        title="商品列表"
        extra={<Button onClick={addProduct}>添加商品</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          bordered={true}
          loading={false}
          rowKey="_id"
          pagination={{ defaultCurrent: 1, defaultPageSize: 6, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: [6, 12, 18] }}
        />
      </Card>
    </>
  )
}
